<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .box{
            width: 100px;
            height: 100px;
            /* background: red; */
        }
        .red{
            background: red;
        }
        .blue{
            background: blue!important;
        }
        .yellow{
            background: yellow;
        }
        .lime{
            background: lime;
        }
    </style>
</head>
<body>
    <div class="app">
        <!-- <p>{{title}}</p> -->
        <p>{{num.toFixed(2)}}</p>
        <p>{{num>=0.5?'大于等于0.5':'小于0.5'}}</p>
        <p v-for='(n,i) in 5'>{{n}}==={{i}}
        <ul>
      <li v-for="(n, i) in 5">{{ n }} --- {{ i }}</li>
    </ul>
 <ul>
      <li v-for="row in 9">
        <span v-for="col in row">{{ col }} * {{ row }} = {{ col * row }}</span>
      </li>
    </ul>
    <input type="text" v-bind:value="title" @input="title=$event.target.value" >
    <hr />
    <input type="text" v-model="title"> 
    <p>{{title}}</p>
     <button @click="getList">调用接口</button>
    </div>
   
    <script>
        const vm=new Vue({
            el:'.app',
            data:{
                title:'这是标题',
                num:Math.random(),
                inner:`<div>我是一个元素</div>`
            },
            methods:{
                async getList() {
                    const res = await fetch('http://121.89.213.194:3001/api/music')
                    console.log(res)
                }
            }
            
        })
        console.log(vm)
    </script>
</body>
</html>